<template>
  <view class="content">
    <view class="nav" :style="{ paddingTop: $util.getStatusBarHeight() }">
      <text @click="$util.goUrl(0)" class="iconfont icon-left" />
      <text>系统消息</text>
      <text @click="read(false)">全部已读</text>
    </view>
    <scroll-list ref="scrollList" :scrollFlag="false" @getData="getData" :slotData="{ allRead }">
      <template v-slot="{ item, index, slotData }">
        <view class="item" @click="goDetail(item, index)">
          <view class="title">
            {{ item.title }}
          </view>
          <view class="time">{{ item.sendTimeShow }}</view>
          <view class="no-read" v-if="!slotData.allRead && !item.isRead">未读</view>
        </view>
      </template>
    </scroll-list>
  </view>
</template>

<script>
import scrollList from "@/components/scroll-list/scroll-list.vue";

export default {
  components: { scrollList },
  data() {
    return {
      allRead: false,
    };
  },
  onShareAppMessage() {
    return this.$util.returnShareObj();
  },
  onLoad() {
    this.$nextTick(() => {
      this.$refs.scrollList.getData(1);
    });
  },
  onPullDownRefresh() {
    this.$refs.scrollList.getData(2);
  },
  onReachBottom() {
    this.$refs.scrollList.getData(3);
  },
  methods: {
    getData(param) {
      this.$api.doctorSysMsgList({ pageSize: 20, pageNum: param.pageNo }).then((res) => {
        if (param.pageNo == 1) {
          this.allRead = false;
        }
        if (res.code == 200) {
          let list = res.rows.map((item) => {
            if (new Date().getFullYear() == new Date(item.sendTime.replace(/-/g, "/")).getFullYear()) {
              item.sendTimeShow = item.sendTime.substring(5, 16);
            } else {
              item.sendTimeShow = item.sendTime.substring(0, 10);
            }
            return item;
          });
          this.$refs.scrollList.setData(list, param.pageNo * 20 >= res.total);
        } else {
          this.$refs.scrollList.setData(false, false);
        }
      });
    },
    goDetail(item, index) {
      this.read(item, index);
      uni.setStorage({
        key: "messageDetail",
        data: item,
        success: () => {
          this.$util.goUrl("/pagesPatient/messageDetail/index");
        },
      });
    },
    read(item, index) {
      if (!item || (!item.isRead && !this.allRead)) {
        let data = {};
        if (item) {
          this.$util.requestLodingType = false;
          data.sysMsgId = item.sysMsgId;
        }
        this.$api.doctorUpdateSysMsgRead(item).then((res) => {
          if (res.code == 200) {
            if (item) {
              item.isRead = true;

              this.$refs.scrollList.changeItem(index, item);
            } else {
              this.allRead = true;
            }
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  background: $back-grey-color;
  min-height: 100vh;
  .nav {
    background-color: $theme-color;
    font-size: $big-font-size;
    text-align: center;
    color: #ffffff;
    height: 70rpx;
    // line-height: 70rpx;
    padding-bottom: 12rpx;
    align-items: center;
    display: flex;
    width: 100vw;
    align-items: center;
    // #ifdef MP-WEIXIN
    width: 75vw;
    padding-right: 25vw;
    // #endif
    position: sticky;
    top: 0;
    z-index: 1000;
    text:first-child {
      padding: 0 20rpx;
    }
    text:nth-child(2) {
      font-size: $default-font-size;
    }
    text:last-child {
      margin-left: 90rpx;
      font-weight: bold;
      border-bottom: 1rpx solid #fff;
    }
  }
}
.item {
  width: 100vw;
  background: #fff;
  border-bottom: 1rpx solid $default-border-color;
  padding: 30rpx 40rpx;
  box-sizing: border-box;
  position: relative;
  .iconfont {
    margin-left: 0rpx;
  }
  .title {
    // font-weight: bold;
    width: 600rpx;
    justify-content: space-between;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .time {
    color: $font-grey-color;
  }
  .no-read {
    font-size: $litte-font-size;
    position: absolute;
    right: 20rpx;
    top: 34rpx;
    color: $theme-color;
    padding: 0rpx 10rpx;
  }
}
.item::after {
  content: "";
  position: absolute;
  height: 1rpx;
  width: 40rpx;
  background: #fff;
  left: 0;
  bottom: 0;
}
</style>
